<template>
	<!-- 跟单大厅 -->
	<view>
		<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode" class="swiper-warp">
			<swiper class="swiper-box" @change="change">
				<swiper-item v-for="(item ,index) in info" :key="index">
					<view class="swiper-item">
						<view class="flex-c top">
							<image :src="item.status" mode="aspectFit"></image>
							<view class="flex-c all">
								<text>全部</text>
								<uni-icons type="arrowright" size="12" color="#6FAFE5"></uni-icons>
							</view>
						</view>
						<view class="top3 flex">
							<view class="flex-col-ac top3_item" v-for="(innerItem,innerIndex) in item.content" :key="innerIndex">
								<view class="headBg flex-c" v-if="innerIndex == 1">
									<image class="imgBg" src="/static/index/champion.png"></image>
									<image class="img" :src="innerItem.src" style="border: 4rpx solid #FFE764;width: 100rpx;height: 100rpx;"></image>
								</view>
								<view class="headBg flex-c" v-else-if="innerIndex == 2">
									<image class="imgBg" src="/static/index/bronze.png"></image>
									<image class="img" :src="innerItem.src" style="border: 4rpx solid #FFAD64;"></image>
								</view>
								<view class="headBg flex-c" v-else-if="innerIndex == 0">
									<image class="imgBg" src="/static/index/runner-up.png"></image>
									<image class="img" :src="innerItem.src" style="border: 4rpx solid #D6D5D5;"></image>
								</view>

								<view class="flex-col-ac info">
									<text class="nickname">{{innerItem.nickname}}</text>
									<view class="rate_num">
										<text class="num">{{innerItem.num}}</text><text class="rate">%</text>
									</view>
								</view>
							</view>
						</view>

					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>

		<view class="type" :class="tabTop?'fixed':''">
			<view class="typebox flex-bc">
				<view class="typeItem flex-ac">
					<view class="itemBox flex-c" v-for="(item,index) in typeList" :key="index" @click="fnChangeType(index)">
						<text :class="currentIndex == index? 'active': '' ">{{item}}</text>
					</view>
				</view>
				<view class="select" @click="fnChangeDrawer()">
					<text>筛选</text>
				</view>
			</view>
		</view>
		<view class="content">

			<view class="list">
				<caipiaoList :type="1"></caipiaoList>
			</view>

			<uni-drawer mode="right" ref="drawer1">
				<view style="padding:100rpx;">
					<view class="uni-title">抽屉式导航1</view>
				</view>
			</uni-drawer>
		</view>
	</view>
</template>

<script>
	import uniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot.vue"
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import caipiaoList from '../components/list.vue'
	const util = require('../../common/util.js')
	export default {
		components: {
			uniSwiperDot,
			uniIcons,
			caipiaoList
		},
		data() {
			return {
				info: [{
					content: [{
						src: '/static/index/choose-nine.png',
						nickname: '鬼谷子鬼谷子',
						num: '68.00'
					}, {
						src: '/static/index/choose-nine.png',
						nickname: '鬼谷子鬼谷子',
						num: '68.00'
					}, {
						src: '/static/index/choose-nine.png',
						nickname: '鬼谷子鬼谷子',
						num: '68.00'
					}],
					status: '/static/index/hit.png'
				}, {
					content: [{
						src: '/static/index/choose-nine.png',
						nickname: '鬼谷子鬼谷子',
						num: '68.00'
					}, {
						src: '/static/index/choose-nine.png',
						nickname: '鬼谷子鬼谷子',
						num: '68.00'
					}, {
						src: '/static/index/choose-nine.png',
						nickname: '鬼谷子鬼谷子',
						num: '68.00'
					}],
					status: '/static/index/profit.png'
				}, {
					content: [{
						src: '/static/index/choose-nine.png',
						nickname: '鬼谷子鬼谷子',
						num: '68.00'
					}, {
						src: '/static/index/choose-nine.png',
						nickname: '鬼谷子鬼谷子',
						num: '68.00'
					}, {
						src: '/static/index/choose-nine.png',
						nickname: '鬼谷子鬼谷子',
						num: '68.00'
					}],
					status: '/static/index/reddish.png'
				}],
				current: 0,
				mode: 'round',
				currentIndex: 0,
				typeList: ['命中稳', '信心足', '带红多', '关注'],
				tabTop: false,
				navWrapHeight: 0,
				swiperHeight: 0
			};
		},
		onPageScroll: util.$api.debounce(function(e) {
			let scrollTop = e.scrollTop
			if (scrollTop >= this.swiperHeight) {
				this.tabTop = true
			} else {
				this.tabTop = false
			}
		}, 5),

		mounted() {
			let that = this
			uni.getSystemInfo({
				success: function(res) { // res - 各种参数
					let info = uni.createSelectorQuery().select(".swiper-warp"); // 获取某个元素
					info.boundingClientRect(function(data) { //data - 各种参数
						that.swiperHeight = data.height;
					}).exec()
				}
			});
		},
		methods: {
			fnGoBack() {
				uni.navigateBack()
			},
			change(e) {
				this.current = e.detail.current;
			},
			fnToShare() {
				console.log('分享')
			},
			fnChangeType(index) {
				if (this.currentIndex == index) return
				this.currentIndex = index
			},
			fnChangeDrawer() {
				this.$refs.drawer1.open()
			}
		}
	}
</script>

<style lang="scss" scoped>
	// .header {
	// 	width: 100%;
	// 	/*  #ifdef  H5  */
	// 	height: 100rpx;
	// 	/*  #endif  */
	// 	/*  #ifdef  APP-PLUS  */
	// 	height: 150rpx;
	// 	/*  #endif  */
	// 	background: #F22F29;
	// 	position: fixed;
	// 	top: 0;
	// 	left: 0;
	// 	z-index: 9999;

	// 	.status-bar {
	// 		height: var(--status-bar-height);
	// 	}

	// 	.title {
	// 		font-size: 36rpx;
	// 		color: #fff;
	// 		height: 100rpx;

	// 		view {
	// 			flex: 1;
	// 			padding: 0 20rpx;
	// 		}

	// 		.share {
	// 			justify-content: flex-end;

	// 			image {
	// 				width: 50rpx;
	// 				height: 50rpx;
	// 				display: block;
	// 				margin-right: 20rpx;
	// 			}
	// 		}
	// 	}
	// }

	// .holder {
	// 	/*  #ifdef  H5  */
	// 	height: 100rpx;
	// 	/*  #endif  */
	// 	/*  #ifdef  APP-PLUS  */
	// 	height: 150rpx;
	// 	/*  #endif  */
	// }

	swiper {
		background: #fff;
		height: 400rpx;
		margin-bottom: 20rpx;

		.swiper-item {
			width: 90%;
			height: 80%;
			background: #fff;
			position: absolute;
			top: 45%;
			left: 50%;
			transform: translate(-50%, -50%);
			box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.1);
			border-radius: 10rpx;
		}
	}

	.top {
		position: relative;
		padding: 20rpx;
		// background: #fff;
		height: 40rpx;

		image {
			height: 100%;
		}
	}

	.top3 {
		padding: 20rpx 0;
		align-items: flex-end;

		.top3_item {
			color: #333;
			font-size: 26rpx;
			flex: 1;

			.headBg {
				position: relative;

				.img {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 10rpx;
					border-radius: 50%;
					display: block;
				}

				.imgBg {
					width: 42rpx;
					height: 42rpx;
					display: block;
					position: absolute;
					top: -20rpx;
					right: 0;
				}
			}


			.info {
				.rate_num {
					color: #F22F29;
					margin-top: 10rpx;

					.rate {
						font-size: 16rpx;
					}
				}
			}

		}
	}

	.all {
		position: absolute;
		top: 50%;
		right: 20rpx;
		transform: translateY(-50%);
		color: #6FAFE5;
		font-size: 24rpx;
	}

	.fixed {
		position: fixed;
		left: 0;
		z-index: 9999;
	}

	.type {
		width: 100%;
		height: 90rpx;
		background: #fff;
		border-bottom: 1rpx solid #eee;
		box-sizing: border-box;
		/*  #ifdef  H5  */
		top: 88rpx;
		/*  #endif  */
		/*  #ifdef  APP-PLUS  */
		top: 0rpx;

		/*  #endif  */
		.typebox {
			height: 100%;
			position: relative;
			font-size: 30rpx;
			color: #777;

			.select {
				padding: 0 60rpx;
				border-left: 0.5rpx solid #ccc;
			}

			.typeItem {
				flex: 1;
				height: 100%;
				margin: 0 20rpx;

				.itemBox {
					flex: 1;
					height: 100%;

					text {
						height: 100%;
						line-height: 90rpx;
						box-sizing: border-box;
						// margin: 0 20rpx;
						text-align: center;
					}
				}

				.active {
					border-bottom: 6rpx solid #F22F29;
					color: #F22F29;
				}
			}

			.border {
				position: absolute;
				bottom: 0;
				left: 0;
				height: 6rpx;
				width: 120rpx;
				border-radius: 2rpx;
				background: #F22F29;
			}
		}

	}

	.content {
		margin: 0 0 20rpx;
	}
</style>
